<template>
    <div id="app" class="with-bar week-hot-detail" :class="{'page-loading':page.loading}">
        <scroll-fixed>
            <div class="ui-header">
                <page-bar>
                    <p slot="middle">{{detail.info.title}}</p>
                    <div slot="right"></div>
                </page-bar>
            </div>
        </scroll-fixed>

        <ui-loading v-if="page.loading" />
        <page-error v-else-if="page.is_end && detail.section_list.length == 0">
            <div slot="logo">
                <img src="../assets/page-empty.png" class="logo">
            </div>
            <div slot="text">
                <p class="text">暂无内容</p>
            </div>
        </page-error>
        <div class="detail-con" v-else>
            <div class="detail-list" v-for="(sitem, index) in detail.section_list">
                <div class="hot-title">
                    {{sitem.title}}
                </div>
                <div class="hot-info">
                    {{sitem.describe}}
                </div>
                <transition-group name="list" tag="div">
                    <ui-item v-for="item in sitem.news_list" :item="item" :key="item.type + '_' +item.id" ></ui-item>
                </transition-group>

                <div class="more" v-if="sitem.is_have_data">
                    <a href="javascript:;" @click="loadMoreHot({week_hot_id:detail.info.id, section_id: sitem.id}, index)">
                        <template v-if="sitem.page_status == 1">
                            加载中
                        </template>
                        <template v-else>
                            展示更多<i class="uicon uicon-more"></i>
                        </template>
                    </a>
                </div>
            </div>
        </div>
        
        <offline :withbar="true"/>
    </div>
</template>
<script>
import Items from '../components/items.vue'
import pageBar from '../components/pagebar.vue'
import scrollFixed from '../components/scrollFixed.vue'
import pageError from '../components/pageError.vue'
import offline from '../components/offline.vue'
import UILoading from '../components/loading.vue'

import mxTabBar from '../mixins/tabbar.js'
import mxReport from '../mixins/report.js'
export default {
    name:'week-hot',
    data(){
        return {
            detail: {info:{}},
            page:{
                is_end:false,//是否已经没有数据
                page_no:1,
                channel_id:'',
                loading:true,
            },
            page_no:[],
            pageError:false,
            pullType: 'down'
        }
    },
    mixins: [mxTabBar,mxReport],
    components:{
        [Items.name]:Items,
        [scrollFixed.name]:scrollFixed,
        [offline.name]:offline,
        [UILoading.name]:UILoading,
        [pageError.name]:pageError,
        [pageBar.name]:pageBar,
    },
    mounted(){
        this.loading = true;
        this.getInfo();
    },
    methods:{
        getInfo() {
            let parse = this.$utils.urlFactory.parse(location.search);
            let url = "";
            if(parse.is_preview !=1 ){
                url = '?ct=week_hot&ac=detail&id='+parse.id;
            }else{
                url = '?ct=week_hot&ac=detail&id='+parse.id+'&is_preview=1';
            }
            this.$http.get(url).then(response=>{
                let {data} = response;
                if(data.code == 0){
                    this.detail = data.data;
                    console.log(this.detail);
                    this.detail.section_list.forEach((bitem, index) => {
                        let list = [];
                        this.detail.section_list[index].is_have_data = !!bitem.is_have_data;
                        this.page_no.push(bitem.page_no);
                        bitem.news_list.forEach((item, idx) => {
                            if(this.$utils.unlike.check(item.id)) return;
                            let tmpItem = item;
                            tmpItem.url = item.detail_url;
                            tmpItem.title = item.title;

                            tmpItem.type = idx == 0 ? 'week-hot' : 'normal';

                            tmpItem.src = item.cover_img[0];
                            tmpItem.source = item.source;
                            tmpItem.view = item.browse_total;
                            tmpItem.time = this.$moment(item.issue_time * 1000).fromNow().replace(' ','');
                            // if(!item.is_hot && item.style_num != 1){
                            //     tmpItem.close = true;
                            // }
                            list.push(tmpItem);
                        })
                        this.detail.section_list[index].news_list = list;
                    })
                }
                this.page.loading = false;
            })
        },
        loadMoreHot(param, index){
            if(this.detail.section_list[index].is_have_data) {
                param.page_no = this.page_no[index]+1;
                this.page_no[index] = param.page_no;
                this.$http.post('?ct=week_hot&ac=section_news_list', param).then(response=>{
                    let {data} = response;
                    if(data.code == 0){
                        let list = [];
                        data.data.list.forEach((item, idx) => {
                            if(this.$utils.unlike.check(item.id)) return;
                            let tmpItem = item;
                            tmpItem.url = item.detail_url;
                            tmpItem.title = item.title;

                            tmpItem.type = 'normal';
                            tmpItem.src = item.cover_img[0];
                            tmpItem.source = item.source;
                            tmpItem.view = item.browse_total;
                            tmpItem.time = this.$moment(item.issue_time * 1000).fromNow().replace(' ','');
                            list.push(tmpItem)
                        })
                        
                        this.detail.section_list[index].news_list = this.detail.section_list[index].news_list.concat(list);
                        
                        // 修改状态
                        this.detail.section_list[index].is_have_data = !! data.data.is_have_data;
                    }
                })
            }
        }
    }
}
</script>
<style lang="less">
.ui-header{
    border-bottom:1px solid #e3e3e3;
}
.detail-con {
    margin-top: 1px;
    background: #fff;
    .hot-title {
        font-size: 38px;
        margin: 0 23px;
        padding: 30px 0 30px 35px;
        position: relative;
        &:before {
            display: block;
            content: '';
            position: absolute;
            left: 0;
            top: 35px;
            width: 12px;
            height: 20px;
            background: #a98273;
            border-radius: 10px;
        }
    }

    .week-hot {
        margin-top: 0;
    }

    .item-wrap {
        border-bottom: 2px solid #e3e3e3;
    }
    .item-normal{
        .img{
            height:230px;
            height:164px;
            img{
                width:100%;
                height:100%;
            }
        }
    }
    .hot-info {
        font-size: 30px;
        color: #919191; 
        line-height: 42px;
        margin: 0 23px;
        padding-bottom: 34px;
        border-bottom: 2px solid #e3e3e3;
    }

    .more {
        padding:38px;
        margin:0 30px;
        font-size:30px;
        border-top:1px solid #e3e3e3;
        &,a {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        a {
            color:#5a4640;
            i {
                margin-left:10px;
                transform: rotate(90deg)
            }
        }
    }
    .img{
        height:240px;
        border-radius: 4px;
        overflow: hidden;
    }
}
.page-bar-middle {
    font-size:36px;
    color:#282828;
}
.week-hot .item-single .img{
    height:5.38rem;
}
</style>


